<template>
<div>
    <div class="type-title">
        {{channelName}}
    </div>
    <Loading v-if="isloading"></Loading>
    <NewsList v-else :news="news"></NewsList>
    <Pager :page="page" :limit="limit" :total="total" :panelNumber="panelNumber" @pageChange="handleChange"></Pager>
    <Top></Top>
</div>
</template>

<script>
import Center from "@/components/Center"
import Pager from "@/components/Pager"
import Top from "@/components/Top"
import NewsList from "@/components/news/NewsList"
import Loading from "@/components/Loading"
import * as newsServer from "@/services/newsService"
export default {
    data() {
        return {
            limit:15,
            total:0,
            panelNumber:10,
            news:[],
            isloading:true
        }
    },
    computed: {
        page(){
            return +this.$route.query.page || 1
        },
        channelName(){
            let channels = this.$store.state.channels.data
            if(channels.length > 0){
                let channel = channels.find(item=>item.channelId == this.$route.params.id)
                return channel.name
            }
            return ""
        }
    },
    components:{
        Center,
        Pager,
        NewsList,
        Loading,
        Top
    },
    methods: {
        handleChange(page){
            this.$router.push({
                query:{
                    page:page
                }
            })
            this.setDatas()
        },
        async setDatas(){
            this.isloading = true
            let resp = await newsServer.getNews(this.$route.params.id,this.page,this.limit)
            this.total = resp.allNum
            this.news = resp.contentlist
            this.isloading = false
            console.log(resp);
        }
    },
    watch: {
        //监听频道变化--频道点击触发
        "$route.params.id":{
            immediate:true, //设置初始化时也要当作数组变化
            handler(newId,oldId){
                this.setDatas()
            }
        }
    }
}
</script>

<style scoped>
    .type-title{
        padding-left: 10px;
        font-size: 25px;
        font-weight: bold;
        line-height: 40px;
        color: blue;
    }
</style>